import React, { useState } from 'react'
import jsonMoney from '../../axios/Money.json'

const moneyList = jsonMoney.data
function Rightcol(params) {
    return <div className="rightcol ">
        <div className="block_header">您的 雪球 帐户</div>
        <div className="wallent_actions_ctn shadow-sm p-3 mb-5 bg-white rounded">
            <div className='clearfix'>
                <div style={{ float: "left" }}>当前钱包余额</div>
                <div style={{ float: "right" }}>¥ {params.money}</div>
            </div>
            <div><a className="addfunds_linkbar linkbar text-decoration-none" href="#">查看我的帐户明细</a><br /></div>
            <div><a className="addfunds_linkbar linkbar text-decoration-none" href="#">兑换 雪球 礼物卡</a></div>
        </div>
        <div className="shadow-sm p-3 mb-5 bg-body-tertiary rounded"
            style={{ border: "1px solid #ccc!important", padding: "14px;border-radius: 16px!important", }}>
            <p className="text-dark text-lg-start ">
                <img style={{ maxHeight: 800 }} src="/img/cx.webp" className="d-block w-100" alt="" />
            </p>
        </div>
    </div>
}

function Leftcol(params) {
    return <div className="leftcol ">
        <h2 className="addfunds_pageheader"> 为 1012030157 的钱包充值</h2>
        <div className="addfunds_about leftcol">
            <div>您的 雪球 钱包资金可用于购买 雪球商城 上的任何一项商品。</div>
            <div className='text-black-50'>下订单之前，您有机会检查您的订单。</div>
        </div>
        <div className="d-flex flex-column bd-highlight mb-3" id="prices_user">
            {moneyList.map(item => {
                return <div className="p-2 bd-highlight shadow-sm p-3 mb-5 bg-white rounded">
                    <div className="addfunds_purchase_action game_purchase_action" style={{ float: "right" }}>
                        <span className='text-black-50'> ¥ {item.price}</span>
                        <a className="btnv6_green_white_innerfade btn_medium" href="#" onClick={
                            () => {
                                params.setmoney(((Math.floor(parseInt(params.money) + parseInt(item.price)) * 100) / 100).toFixed(2))
                                alert("充值成功")
                            }}><span>充值</span></a>
                    </div>
                    <h1>充值 ¥ {item.price}</h1>
                </div>
            })}
        </div>
        <div className="addfunds_footer">
            <p>更多详情，请参阅<a className='text-decoration-none' href="#" rel="">《雪球 订户协议》</a>。</p>
        </div>
    </div>
}
export default function Money() {
    const [money, setmoney] = useState("50.00")
    return (<div className='Money'>
        <div class="container text-body" style={{ textAlign: "start" }}>
            <div class="row">
                <div class="col-sm-8"> {/* 主体 */}
                    <Leftcol money={money} setmoney={setmoney} />
                </div>
                <div class="col-sm-4"> {/* 右边栏 */}
                    <Rightcol money={money} setmoney={setmoney} />
                </div>
            </div>
        </div>
    </div>)
}
